<template>
	<view class="select-color">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content">颜色选择</block>
		</cu-custom>
		<color-picker :picker-width="250" :height="colorPickerHeight" :disabled-add="true" :is-light="false" 
		:local-storage="true"
		local-storage-id="color-picker-key" 
		 @change="changeColor"></color-picker>

		<button @click="go" class="cu-btn block  bg-blue lg submit-btn">确认</button>
	</view>
</template>

<script>
	import ColorPicker from "@/components/color-picker/index.vue";
	export default {
		components: {
			ColorPicker
		},
		data() {
			return {
				colorPickerHeight: 500
			}
		},
		mounted() {
			this.colorPickerHeight = this.contentHeight - 50;
		},
		methods: {
			changeColor({rgb}) {
				this.rgb = rgb;
			},
			go() {
				this.$store.dispatch('app/setSelectColor',{
					key: this.rgb,
					value: `rgb(${this.rgb.join()})`
				});
				this.$store.isSelectColorOver = true;
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style scoped>
	.select-color {
		background: #074363;
		padding-top: 35px;
		height: 100vh;
	}

	.submit-btn {
		margin: 0 20px;
	}
</style>
